<template>
  <div class="imageLoader-container">
      <!-- 当占位图片不用展示时，清除该节点节省效率 -->
      <img v-if="!placeholderDelete" :src="placeholder" alt="" class="placeholderImg" :style="{opacity: originImgShow ? 0 : 1, transition:duration + 'ms'}">
      <img @load="load" :src="src" alt="" class="originImg" :style="{opacity: originImgShow ? 1 : 0, transition:duration + 'ms'}">
  </div>
</template>

<script>
export default {
    data(){
        return {
            originImgShow:false,
            placeholderDelete:false
        }
    },
    props:{
        src:{ //原始图片路径
            type:String,
            required:true,
        },
        placeholder:{ //占位图片路径
            type:String,
            required:true,
        },
        duration:{
            type:Number,
            default:1500,
        }
    },
    methods:{
        load(){
            // console.log("原始图片加载完毕")
            this.originImgShow = true;
            const _this = this
            setTimeout(function(){ //等图片渐入渐出完
                _this.placeholderDelete = true;
                _this.$emit("allEnd")
            }, this.duration)
        
        }
    }
}
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
    .imageLoader-container{
        position:relative;
        width:100%;
        height:100%;
        overflow:hidden;
        img{
            .self-fill();
            width:100%;
            height:100%;
            &.placeholderImg{
                filter:blur(2vw)
            }
        }
    }
</style>